<template>
    <div>
        <textarea id="code-mirror" v-model="codevalues"></textarea>
    </div>
</template>
<script lang="ts">
import {
    defineComponent,
    onMounted,
    toRaw,
    ref,
    PropType,
    nextTick,
} from 'vue'
import codemirror from './codemirror'
import type { PropType } from 'vue'

const props = {
    themeName: {
        type: String as PropType<String>,
        default: () => 'yeti',
    },
}
export default defineComponent({
    name: 'Datax',
    props,
    emits: {
        handleSave: null,
    },
    setup(props, { emit }) {
    // 定义code容器
        let codevalues = ref()
        let setTheme = ref()
        let setLang = ref()
        codevalues.value = `
              {
                name:'yan',
                age:24,
                worker:'Frontend'
              }
            `
        nextTick(() => {
            const editor = toRaw(
                codemirror('code-mirror', {
                    mode: 'javascript',
                    theme: props.themeName,
                    readOnly: false,
                    tabSize: 4,
                }),
            )
            let keypress = () => {
                if (!editor.getOption('readOnly')) {
                }
            }
            editor.on('keypress', keypress)
            editor.on('blur', (e) => {
                codevalues.value = e.getValue()
                editor.setValue(codevalues.value)
            })
            editor.on('changes', (e) => {
                // this._cacheParams()
                emit('handleSave', e.getValue())
            })
            editor.setValue(codevalues.value)
            setTheme.value = (e) => {
                editor.setOption('theme', e)
            }
            setLang.value = (e) => {
                editor.setOption('mode', e)
            }
        })
        // setOption更改编辑器配置
        // 设置值
        return {
            codevalues,
            setTheme,
            setLang,
        }
    },
})
</script>

<style lang="less">
.CodeMirror {
  border: 1px solid #ccc;
  height: 80vh;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.cm-s-mdn-like.CodeMirror {
  background: #f1e9cf;
}
.cm-s-mdn-like .CodeMirror-gutters {
  border-left: 6px solid transparent;
  /* background: red; */
}
.CodeMirror-linenumber {
  width: 20px;
}

.CodeMirror-code {
  font-weight: 100;
  font-family: century gothic, texgyreadventor, stheiti, sans-serif;
}
::-webkit-scrollbar {
  width: 7px;
  height: 8px;
}

// ::-webkit-scrollbar-track {
//   background: transparent;
// }

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.05);
}

::-webkit-scrollbar-thumb {
  // background: rgba(0, 0, 0, 0.6);
  background-color: rgba(144, 147, 153, 0.3);
  // background-color: rgba(144, 147, 153, 0.3);
  border-radius: 2px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(111, 118, 121);
}
</style>
